<template>
  <div
    ref="refCharts"
    class="chart-box"
    :style="{ height: height, width: width }"
  ></div>
</template>

<script setup>
import { reactive, onMounted, ref, nextTick } from "vue";

import * as echarts from "echarts";
import useEcharts from "@/hooks/useEcharts";

import mapJson from "@/assets/echartsMap/data";

const refCharts = ref(null);

const { chart } = useEcharts();

const props = defineProps({
  className: {
    type: String,
    default: "chart",
  },
  width: {
    type: String,
    default: "100%",
    required: true,
  },
  height: {
    type: String,
    default: "100%",
    required: true,
  },
  chartData: {
    type: Object,
    required: true,
  },
});

// 定义变量内容

const state = reactive({});

function setOptions(chartData) {
  let data = [
    // {
    //   name: "北京",
    //   value: [116.24, 39.55, 100],
    // },
    // {
    //   name: "深圳",
    //   value: [114.271522, 22.753644],
    // },
    // {
    //   name: "重庆",
    //   value: [106.54, 29.59],
    // },
    // {
    //   name: "浙江",
    //   value: [120.19, 30.26],
    // },
    // {
    //   name: "上海",
    //   value: [121.4648, 31.2891],
    // },
  ];
  let LableData = [
    // {
    //   name: "深圳",
    //   coords: [
    //     [114.271522, 22.753644],
    //     [118.24, 18.55, 100],
    //   ], // 线条位置[开始位置，结束位置]
    //   value: [1021, 120],
    // },
    // {
    //   name: "浙江",
    //   coords: [
    //     [120.19, 30.26],
    //     [125.24, 27.55, 100],
    //   ], // 线条位置[开始位置，结束位置]
    //   value: [1021, 120],
    // },
    // {
    //   name: "上海",
    //   coords: [
    //     [121.4648, 31.2891],
    //     [122.4648, 32.2891],
    //   ], // 线条位置[开始位置，结束位置]
    //   value: [1201, 60],
    // },
  ];
  let uploadDataUrl = mapJson;
  // 注册地图
  echarts.registerMap("china", uploadDataUrl);

  if (chart.value) {
    chart.value.setOption({
      /*backgroundColor: '#000f1e',*/
      geo: {
        map: "china",
        aspectScale: 0.85,
        layoutCenter: ["50%", "50%"], //地图位置
        layoutSize: "100%",
        itemStyle: {
          normal: {
            shadowColor: "#276fce",
            shadowOffsetX: 0,
            shadowOffsetY: 15,
            opacity: 0.5,
          },
          emphasis: {
            areaColor: "#276fce",
          },
        },
        regions: [],
      },
      series: [
        // 常规地图
        {
          type: "map",
          mapType: "china",
          aspectScale: 0.85,
          layoutCenter: ["50%", "50%"], //地图位置
          layoutSize: "100%",
          zoom: 1, //当前视角的缩放比例
          // roam: true, //是否开启平游或缩放
          scaleLimit: {
            //滚轮缩放的极限控制
            min: 1,
            max: 2,
          },
          itemStyle: {
            normal: {
              areaColor: "#0c274b",
              borderColor: "#1cccff",
              borderWidth: 1.5,
            },
            emphasis: {
              areaColor: "#02102b",
              label: {
                color: "#fff",
              },
            },
          },
        },
        // 区域散点图
        {
          type: "effectScatter",
          coordinateSystem: "geo",
          zlevel: 2,
          symbolSize: 10,
          rippleEffect: {
            //坐标点动画
            period: 3,
            scale: 5,
            brushType: "fill",
          },
          label: {
            normal: {
              show: true,
              position: "right",
              formatter: "{b}",
              color: "#b3e2f2",
              fontWeight: "bold",
              fontSize: 16,
            },
          },

          data: data,
          itemStyle: {
            //坐标点颜色
            normal: {
              show: true,
              color: "#ff8003",
              shadowBlur: 20,
              shadowColor: "#fff",
            },
            emphasis: {
              areaColor: "#f00",
            },
          },
        },
        {
          type: "lines",
          zlevel: 3,
          symbol: "circle",
          symbolSize: [5, 5],
          color: "#ff8003",
          opacity: 1,
          label: {
            show: true,
            padding: [10, 20],
            color: "#fff",
            backgroundColor: "#1a3961",
            borderColor: "#aee9fb",
            borderWidth: 1,
            borderRadius: 6,
            formatter(params) {
              let arr = [
                params.name,
                "废水污染：" + params.value[1] + "家",
                "废气污染：" + params.value[0] + "家",
              ];
              return arr.join("\n");
            },
            textStyle: {
              align: "left",
              lineHeight: 20,
            },
          },
          lineStyle: {
            type: "solid",
            color: "#fff",
            width: 0.5,
            opacity: 1,
          },
          data: LableData,
        },
      ],
    });
  }
}
function initChart() {
  chart.value = echarts.init(refCharts.value, "macarons");
  setOptions(props.chartData);
}

watchEffect(() => {
  if (props.chartData) {
    setOptions(props.chartData);
  }
});

onMounted(() => {
  nextTick(() => {
    initChart();
  });
});
</script>

<style lang="scss" scoped>
.map {
  background-color: #566877;
}
</style>
